<template>
	<view class="content">
		<view class="">{{count}}11</view>
		<button type="primary" @click="addHandle">+1</button>
		<button type="primary" @click="addN">+N</button>
		<view class="-----------------------"></view>
		<button type="primary" @click="minus">-1</button>
		<button type="primary" @click="minusN">-N</button>
		<button type="primary" @click="addAsync">异步+1</button>
		<button type="primary" @click="addAsyncN">异步+N</button>
		<button type="primary" @click="addAsyncN1">异步+N1</button>
		<button type="primary" @click="getCount">getCount</button>
		
		
	</view>
</template>

<script>
	import {mapState,mapMutations,mapActions,mapGetters} from 'vuex'

	export default {
		data() {
			return {
				title: 'Hello'
			}
		},
		computed:{
			...mapState(['count','projects']),
			...mapGetters(['showNum'])
		},
		onLoad() {
         
		},
		methods: {
			...mapMutations(['add','minus']),
			...mapActions(['addAsyncN']),
   //          add(){
			// 	//这种操作是不合法的
			// 	//this.$store.state.count++
			// 	//调用motations的函数
			// 	//this.$store.commit("add")
				
			// },
			minus(){
				this.$store.commit("minus")
			},
			addN(){
				//传参数3	
				this.$store.commit("addN",3)
			},
			minusN(){
				this.$store.commit("minusN",3)
			},
			addHandle(){
				this.add();
			},
			addAsync(){
				
				this.$store.dispatch('addAsync');
			},
			addAsyncN(){
				
				this.$store.dispatch('addAsyncN',3);
			},
			addAsyncN1(){
				this.addAsyncN(3)
			},
			
			getCount(){
				console.log(this.$store.getters.showNum);
			}
		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
</style>
